<template>
  <div>
    <el-empty v-if="!staticUrl" :image-size="200" :description="$t('merchant.no_static_url')">
      <el-button 
       v-if="verifyPermission('126868.MANAGE')"
      type="primary" @click="genStaticUrl">{{
        $t('merchant.gen_static_url')
      }}</el-button>
    </el-empty>
    <el-card
      class="fty-card"
      shadow="always"
      style="margin: 36px"
      :body-style="{ padding: '0px' }"
      :page-size="pageSize"
      :total="rows"
      :current-page="pageNo"
      @current-change="currentChangeHandle"
    >
      <div v-if="staticUrl" class="p-4 flex justify-center">
        <div style="width: 240px; border-radius: 4px; border: solid 4px #131D29; background: #131D29;">
          <div style="background-color: #fff; padding: 16px;">
            <div id="qrCodeUrl" style="width: 200px; height: 200px"></div>
          </div>

          <div style="color: #fff;padding: 16px">
            {{ staticUrl }}
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getStaticUrl, genStaticUrl } from '@/api/merchant.ts'
import QRCode from 'qrcodejs2-fix'
import { verifyBtnPermission } from "@/utils";

export default {
  components: {},
  props: {
    merchant: {
      type: Object,
      default: () => {}
    }
  },

  data() {
    return {
      mrchId: this.$route.params.mrchId,
      staticUrl: ''
    }
  },
  mounted() {
    this.getStaticUrl()
    
  },
  methods: {
    verifyPermission(val) { 
      return verifyBtnPermission(val);
    },
    handleCodeOpen(code) {
      this.$nextTick(() => {
        document.getElementById('qrCodeUrl').innerHTML = ''
        let qrCodeUrl = new QRCode('qrCodeUrl', {
          width: 250,
          height: 250,
          // text: this.originUrl,code,
          text: this.staticUrl,
          colorDark: 'black',
          colorLight: '#fff'
        })
      })
    },
    getStaticUrl() {
      getStaticUrl(this.mrchId)
        .then((res) => {
          if (res) {
            this.staticUrl = res
            this.handleCodeOpen()
          }
        })
        .catch((error) => {
          this.$confirmError(error)
        })
    },
    genStaticUrl() {
      genStaticUrl(this.mrchId)
        .then((res) => {
          this.staticUrl = res
          this.handleCodeOpen()
        })
        .catch((error) => {
          this.$confirmError(error)
        })
    }
  }
}
</script>

<style lang="scss" scoped></style>
